<template>
  <div class="list"> 
    <div class="img_left">
      <div class="image" v-show="!item.creator_info.email">
        {{item.creator_info.alias.substring(item.creator_info.alias.length-2)}}
      </div>
      <van-image
        v-show="item.creator_info.email"
        round
        width="42px"
        height="42px"
        fit="cover"
        lazy-load
        :src="item.creator_info.email"
        />
    </div>
    <div class="text_right">
      <div class="title">
        {{title_data.name}}
        <span>{{submissionTime}}</span>
      </div>
      <p 
        class="appeal_box" 
        v-for="(value,key,index) in title_data.fields" 
        :key="index"
      >
        {{key}}：{{value}}
      </p>
      <p class="state" :class="item.act_state_id == 4 ?'endstate':''">{{state_list[item.act_state_id]}}</p>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  props:{
    item:{
      type:Object,
      required:true,
    }
  },
  data(){
    return{
      title_data:{},
      submissionTime:"",
      state_list:['草稿中','进行中','被退回','被撤回','已完成','已关闭'],
    }
  },
  created(){
    // 脏数据处理
    try{
      this.title_data = JSON.parse(this.item.title)
    }catch(e){
      this.title_data = {
        name:'脏数据处理',
        fields:[]
      }
    }
    this.submissionTime = moment(this.item.gmt_created).format('YYYY-MM-DD')
  },
}
</script>

<style lang="less" scoped>
*{
  box-sizing: border-box;
}
.list{
  width:100%;
  height: 120px;
  display: flex;
  background: #fff;
  padding:5px 15px;
  border-bottom: 1px solid #F7F7F7;
  .img_left{
    padding-top: 5px;
    width: 57px;
    height: 100%;
    .image{
      width:42px;
      height: 42px;
      background-color: rgb(58, 148, 250);
      color: #fff;
      text-align: center;
      line-height: 42px;
      overflow: hidden;
      border-radius: 50%;
      font-size: 15px;
    }
  }
  .text_right{
    flex: 1;
    overflow: hidden;
    .title{
      font-size: 14px;
      line-height: 25px;
      display: flex;
      justify-content: space-between;
      span{
        font-size: 12px;
        color:#B7B5B5;
      }
    }
    p{
      margin: 0;
      line-height: 20px;
      color:#B7B5B5;
      font-size: 13px;
    }
    .appeal_box{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .state{
      color:#D6B480;
      font-size: 13px;
      line-height: 25px;
    }
    .endstate{
      color:#77DBC3;
    }
  }
}
</style>